<template>
  <div class='container'>
    <el-row>
      <el-col>
        <el-card>
          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">
            <el-row>
<!--              <el-form class="form" label-width="100px" :model="logParams">-->
<!--                <el-col :span="8">-->
<!--                  <el-form-item label="账号:">-->
<!--                    <el-input v-model="logParams.account" size="mini" placeholder="请输入账号"></el-input>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->

<!--                <el-col :span="8">-->
<!--                  <el-form-item label="所属:">-->
<!--                    <el-select v-model="logParams" placeholder="请选择" style="width:100%">-->
<!--                      <el-option-->
<!--                        v-for="item in goodsType"-->
<!--                        :key="item.value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value">-->
<!--                        <span style="float: left">{{ item.label }}</span>-->
<!--                      </el-option>-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->

<!--                <el-col :span="8">-->
<!--                  <el-form-item>-->
<!--                    <el-button @click="submitSearch()">搜索</el-button>-->
<!--                    <el-button @click="clearListSearch">重置</el-button>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-form>-->
            </el-row>

            <div class="table-wrapper">
              <el-table
                :data="logList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
              >

                <el-table-column
                  prop="adminId"
                  label="账号"
                  align='center'
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="admin"
                  label="姓名"
                  align='center'>
                </el-table-column>
                <el-table-column
                  prop="action"
                  label="操作"
                  align='center'>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="info"-->
                <!--                  label="部门名称"-->
                <!--                  align='center'-->
                <!--                  width="150"-->
                <!--                  :show-overflow-tooltip="true"-->
                <!--                >-->
                <!--                </el-table-column>-->
                <el-table-column
                  prop="addTime"
                  :formatter="formatDate"
                  label="最后登录"
                  align='center'>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="price"-->
                <!--                  label="职位"-->
                <!--                  align='center'-->
                <!--                  width="120">-->
                <!--                </el-table-column>-->
              </el-table>

            </div>
          </div>

          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import bread from '../../common/bread'
import pagination from '../../common/pagination'
import { formatDate } from 'src/utils/utils'

import { logList } from '../../api/api'


export default {
  data () {
    return {
      logParams: {
        pageNum: 1,
        pageSize: 10
      },
      logList: [],
      pageTotal: 0,
      goodsType: [{
        value: '0',
        label: '员工'
      }]
    }
  },
  mounted () {
    this.getLogList()
  },
  methods: {
    getLogList () {
      const para = Object.assign({}, this.logParams)
      logList(para).then(res => {
        console.log(res)
        this.logList = res.data.list
        this.pageTotal = res.data.pageTotal
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.logParams.pageNum = val
      this.getLogList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.logParams.pageSize = val
      this.getLogList()
    },
    // 格式化表单数据
    clearForm () {
      this.logParams = {
        pageNum: 1,
        pageSize: 10
      }
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
    },
    formatDate (row, column) {
      let date = row[column.property]
      date = new Date(date)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    bread,
    pagination
  }
}
</script>
<style lang='scss'>
  .container {
    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }
  }
</style>
